<template>
  <div class="container">
    <div class="items">
      <div class="item">
        <div class="item-left">头 像：</div>
        <div class="item-right">
          <div class="avatar">
            <img v-if="form.logo_url" :src="form.logo_url" />
            <div class="headimg-alt" v-else>上传</div>
          </div>
          <input
            type="file"
            id="upload-headimg"
            @change="e => handleHeadImgChange(e, 'logo_url')"
          />
        </div>
      </div>
      <div class="item">
        <div class="item-left">店铺名称：</div>
        <div class="item-right">
          <yd-input v-model="form.name" :max="20"></yd-input>
        </div>
      </div>
      <div class="item">
        <div class="item-left">手 机：</div>
        <div class="item-right">
          <yd-input
            type="tel"
            v-model="form.merchant_phone"
            :max="11"
          ></yd-input>
        </div>
      </div>
      <div class="item">
        <div class="item-left">地 址：</div>
        <div class="item-right">
          <yd-input v-model="form.merchant_address" :max="20"></yd-input>
        </div>
      </div>
      <div class="item">
        <div class="item-left">经 度：</div>
        <div class="item-right">
          <yd-input type="number" v-model="form.longitude" :max="10"></yd-input>
        </div>
      </div>
      <div class="item">
        <div class="item-left">纬 度：</div>
        <div class="item-right">
          <yd-input type="number" v-model="form.latitude" :max="10"></yd-input>
        </div>
      </div>
      <div class="item">
        <div class="item-left">开始时间：</div>
        <div class="item-right">
          <!-- <yd-input
            type="email"
            v-model="userInfo.address"
            :max="20"
          ></yd-input> -->
          <yd-datetime
            type="time"
            v-model="form.start_time"
            class="time"
          ></yd-datetime>
        </div>
      </div>
      <div class="item">
        <div class="item-left">休息时间：</div>
        <div class="item-right">
          <!-- <yd-input
            type="email"
            v-model="userInfo.address"
            :max="20"
          ></yd-input> -->
          <yd-datetime
            type="time"
            v-model="form.end_time"
            class="time"
          ></yd-datetime>
        </div>
      </div>
      <div class="item">
        <div class="item-left">商品类型：</div>
        <div class="item-right">
          <select v-model="form.bussines_type">
            <option :value="1">吃</option>
            <option :value="2">喝</option>
            <option :value="3">玩</option>
          </select>
        </div>
      </div>
      <div class="item">
        <div class="item-left">标签：</div>
        <div class="item-right">
          <yd-checkbox-group v-model="form.label_id">
            <yd-checkbox
              :val="item.labelId"
              v-for="item in tags"
              :key="item.labelId"
              >{{ item.name }}</yd-checkbox
            >
          </yd-checkbox-group>
        </div>
      </div>
      <div class="item">
        <div class="item-left">商铺主图：</div>
        <div class="item-right">
          <div class="avatar cardImg">
            <img v-if="form.main_pic" :src="form.main_pic" />
            <div class="headimg-alt" v-else>上传</div>
          </div>
          <input
            type="file"
            id="upload-headimg"
            @change="e => handleHeadImgChange(e, 'main_pic')"
          />
        </div>
      </div>
      <div class="item">
        <div class="item-left">身份证正面：</div>
        <div class="item-right">
          <div class="avatar cardImg">
            <img v-if="form.id_front_pic" :src="form.id_front_pic" />
            <div class="headimg-alt" v-else>上传</div>
          </div>
          <input
            type="file"
            id="upload-headimg"
            @change="e => handleHeadImgChange(e, 'id_front_pic')"
          />
        </div>
      </div>
      <div class="item">
        <div class="item-left">身份证反面：</div>
        <div class="item-right">
          <div class="avatar cardImg">
            <img v-if="form.id_reverse_pic" :src="form.id_reverse_pic" />
            <div class="headimg-alt" v-else>上传</div>
          </div>
          <input
            type="file"
            id="upload-headimg"
            @change="e => handleHeadImgChange(e, 'id_reverse_pic')"
          />
        </div>
      </div>
      <div class="item">
        <div class="item-left">营业执照：</div>
        <div class="item-right">
          <div class="avatar cardImg">
            <img
              v-if="form.businesslicense_pic"
              :src="form.businesslicense_pic"
            />
            <div class="headimg-alt" v-else>上传</div>
          </div>
          <input
            type="file"
            id="upload-headimg"
            @change="e => handleHeadImgChange(e, 'businesslicense_pic')"
          />
        </div>
      </div>

      <yd-button size="large" type="primary" @click.native="submit" class="btn">
        确 定
      </yd-button>
    </div>
  </div>
</template>
<script>
import { getTags, applyForBoss } from '@/api';
export default {
  name: 'mineInfoDetail',
  data() {
    return {
      tags: [],
      form: {
        bussines_id: 28,
        name: '',
        bussines_type: 1,
        logo_url: '',
        longitude: '',
        latitude: '',
        start_time: '',
        end_time: '',
        label_id: [],
        merchant_address: '',
        merchant_phone: '',
        main_pic: '',
        businesslicense_pic: '',
        id_front_pic: '',
        id_reverse_pic: ''
      }
    };
  },
  mounted() {
    this.getTags();
  },
  methods: {
    getTags() {
      getTags().then(res => {
        console.log(res);
        this.tags = res.data || [];
      });
    },
    submit() {
      const {
        bussines_id,
        name,
        bussines_type,
        logo_url,
        longitude,
        latitude,
        start_time,
        end_time,
        label_id,
        merchant_address,
        merchant_phone,
        main_pic,
        businesslicense_pic,
        id_front_pic,
        id_reverse_pic
      } = this.form;
      const hasError = (() => {
        switch (true) {
          case !logo_url:
            return '请上传店铺头像';
          case !name:
            return '店铺名称不能为空';
          case merchant_phone && !/^1[23456789]\d{9}$/g.test(merchant_phone):
            return '手机格式不正确';
          case !merchant_address:
            return '地址不能为空';
          case !longitude:
            return '经度不能为空';
          case !latitude:
            return '纬度不能为空';
          case !start_time:
            return '开始经营时间不能为空';
          case !end_time:
            return '休息时间不能为空';
          case !main_pic:
            return '请上传店铺主图';
          case !id_front_pic:
            return '请上传身份证正面照片';
          case !id_reverse_pic:
            return '请上传身份证反面照片';
          case !businesslicense_pic:
            return '请上传营业执照';
          default:
            return false;
        }
      })();
      if (hasError === false) {
        console.log(this.form);
        let temp = { ...this.form };
        temp.label_id = temp.label_id.join(',');
        temp.start_time = temp.start_time + ':00';
        temp.end_time = temp.end_time + ':00';
        temp.logo_url = '123';
        temp.main_pic = '123';
        temp.id_front_pic = '123';
        temp.id_reverse_pic = '123';
        temp.businesslicense_pic = '123';
        applyForBoss(temp).then(res => {
          if (res.success) {
            this.$dialog.toast({
              mes: '已上传请求，请耐心等待审核',
              type: 'success',
              timeout: 800
            });
            this.$router.back();
          } else {
            this.$dialog.toast({
              mes: res.msg,
              type: 'error',
              timeout: 800
            });
          }
        });
      } else {
        this.$dialog.toast({
          mes: hasError,
          type: 'error',
          timeout: 800
        });
      }
    },
    handleHeadImgChange(e, type) {
      const file = e.target.files[0];
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = e => {
        let base64 = e.currentTarget.result;
        // document.getElementById('upload-headimg').src = base64;
        this.form[type] = base64;
      };
    }
  }
};
</script>
<style scoped lang="less">
.container {
  text-align: left;
}
.avatar {
  float: right;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0.05rem solid #fff;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .headimg-alt {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
    border-radius: 0;
    border-radius: 50%;
  }
}

.cardImg {
  width: 2rem;
  height: 1.5rem;
  background: white !important;

  img {
    border-radius: 0;
  }

  .headimg-alt {
    border-radius: 0;
  }
}

.input-style {
  background: #fff;
  height: 0.8rem;
  padding: 0 0.15rem;
  border-radius: 0.14rem;
  margin: 0.35rem 0;
  font-size: 0.3rem;
}

.userInfo {
  text-align: left;
  display: flex;
  align-items: center;
  font-size: 0.34rem;
}

.line {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 0.2rem 0;
}

.wrapper {
  background-color: #eee;
  border-radius: 0.05rem;
  padding: 0.5rem;
}

/deep/ .yd-cell-item:after {
  margin: 0;
}

/deep/ .yd-cell-left {
  font-size: 0.3rem !important;
}
/deep/ .yd-cell-right {
  span,
  select {
    font-size: 0.32rem;
    letter-spacing: 0.02rem;
  }
}

.items {
  .item {
    display: flex;
    padding: 0.3rem 0.2rem;
    border-bottom: 1px solid #f2f2f2;
    background: white;
    align-items: center;
    font-size: 0.28rem;
    position: relative;
    .item-left {
      width: 1.8rem;
    }
    .item-right {
      flex: 1;
      text-align: right;
      position: relative;

      select,
      /deep/input {
        border: none;
        width: 100%;
        height: 100%;
        text-align: right;
        color: #2c3e50;
      }

      /deep/select {
        direction: rtl;
      }

      /deep/.yd-input-clear {
        display: none;
      }

      #upload-headimg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0;
      }
    }
  }
}

.btn {
  font-size: 0.3rem;
  font-weight: 500;
  // border-radius: 0.15rem;
  width: calc(100% - 0.3rem);
  margin: 0.15rem;
}
</style>
